iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 7
0
Modern Web

30天Vue出Google SSO系列 第 7

Day 07. F2E-輸入帳號

  • 分享至 

  • xImage
  •  

https://ithelp.ithome.com.tw/upload/images/20200820/201186864QiqiXmvHO.jpg

回顧一下,昨天有分析登入頁會有4個子頁:

  • 輸入帳號
  • 選擇帳號
  • 輸入密碼
  • 驗證身分

後面幾天會分別來把四個子頁的畫面做出來~那我們就開始吧!!


#輸入帳號開發

參考Google的輸入帳號,要做的和它相去不遠!!
https://ithelp.ithome.com.tw/upload/images/20200819/20118686vGjs7UE5k8.jpg

接著就開啟 /components/KeyinUser.vue 開始摟~

#Step 1

輸入帳號頁面屬於表單,所以我們會用到Vuetify-Forms表單組件來處理
首先在 template 裡面包上最外層的 v-from:

<template>
  <v-form ref="form">
  </v-form>
</template>
  • v-from
    • ref: 識別組件的屬性,可透過 this.$refs.ref值 的方式來對應
      不過今天不會用到它,先寫起來放xD

#Step 2

表單內加上輸入帳號的文字輸入框:

<v-form ref="form">
  <v-card-text>
    <v-text-field
      label="輸入您的帳號"
      type="text"
      class="font-weight-bold"
      outlined
      clearable
    ></v-text-field>
  </v-card-text>
</v-form>
  • v-card-text: 卡片文字內容
  • v-text-field: Vuetify-Text Fields 文本框組件
    • label: 文字框的標題
    • type: 文字框的輸入類型
    • outlined: 有邊框的文字框外觀
    • clearable: 清除按鈕及功能

效果如下:
gif已死QQ

#Step 3

想像一下,若帳號密碼等資訊放在不同頁的話,資料傳遞溝通會很困難
於是這裡設計將表單資訊都存放在父層 Login.vue 的data中,溝通時使用 props 方式傳入,子層則使用 $emit 來回寫資料

這樣寫既可以保持數據的流向,出錯時也較好查詢原因,日後維護會方便許多

接著開啟 /views/Login.vue 在data裡面加上需要的表單資料吧!!

data() {
  return {
    ...,
    user: {
      username: "", 
      accountId: "", 
      password: "", 
    },
  };
},
  • username: 姓名
  • accountId: 帳號
  • password: 密碼

註: 姓名的部分會在驗證帳號後由伺服器回傳,這邊先寫起來放

#Step 4

再來會用到一個神奇的後綴語法 - .sync

  • .sync: 資料傳遞的語法糖
    本質一樣是父傳子,子層用 $emit 通知父層做資料改變,但它的好處是直接幫助我們省去了在父層多寫1個事件及 v-on:update 監聽
    參考Vue-.sync 修飾符或是估狗大神xD

接著在將帳號傳入時加上它:

<router-view :account-id.sync="user.accountId"></router-view>

回到 /components/KeyinUser.vue 用 props 接收

export default {
  name: "KeyinUser",
  props: ["accountId"],
};

寫一個 computed 來計算要對應的帳號綁定資料
其中內容有 get() 方法與 set() 方法

  • get(): 得到props傳入的帳號
  • set(value): 使用 $emit 方法將值送回父層更新
computed: {
  myAccountId: {
    get() {
      return this.accountId;
    },
    set(value) {
      this.$emit("update:accountId", value);
    },
  },
},

最後用 v-model 指令綁定文字框組件:

<v-card-text>
  <v-text-field
    v-model="myAccountId"
  ></v-text-field>
</v-card-text>

這樣就完成了帳號的雙向綁定溝通囉~

#Step 5

再來要做個簡單的驗證,加上這兩個驗證規則,參考Vuetify-Forms 創建規則:

  • 必填
  • 欄位長度限制

在文字框加上 v-bind:對應規則:

<v-text-field
  ...
  :rules="usernameRules"
></v-text-field>

對應規則用陣列的方式寫在data裡面,規則的寫法為: 判斷||判斷不成立要呈現的訊息
第一個規則的情境就是「必須輸入帳號否則顯示"請輸入帳號"」

data() {
  return {
    usernameRules: [
      (v) => !!v || "請輸入帳號", 
    ],
  };
},

https://ithelp.ithome.com.tw/upload/images/20200820/20118686dL6cICX3tl.jpg

第二個規則的情境就是「必須有輸入且輸入值長度小於規定否則顯示"最多10碼"」:

data() {
  return {
    usernameLength: 10,
    usernameRules: [
      (v) => !!v || "請輸入帳號",
      (v) => (v && v.length <= this.usernameLength) || "最多10碼",
    ],
  };
}

順便加上 counter 屬性讓文字框呈現長度規則,使用者體驗會好一點點:

<v-text-field
  ...
  :counter="usernameLength"
></v-text-field>

效果如下:
https://ithelp.ithome.com.tw/upload/images/20200820/20118686qcYz0UiVg3.jpg

#Step 6

最後加上 [繼續] 按鈕就可以結束這回合!!

<v-form ...>
  <v-card-actions>
    <v-spacer></v-spacer>
    <v-btn color="primary" class="mr-2">繼續</v-btn>
  </v-card-actions>
</v-form>
  • v-card-actions: 放卡片的 動作 的容器,例如按鈕

來看看最後完成的效果吧~
gif已死QQ


今日重點:

  • 帳號密碼放在父層 Login.vue,並使用 .sync$emit 做父子層雙向溝通
  • 文字框驗證使用 v-bind:rules="驗證規則",驗證規則放在data中類型為 陣列
  • 驗證規則寫法為: 判斷||若判斷不成立要呈現的訊息
  • Vuetify 組件的API查詢及使用

有些觀念可能很難懂,如果我有講不清楚或不完整請提出來~

有需要改進或是任何意見建議歡迎下面留言~


上一篇
Day 06. F2E-登入頁開發
下一篇
Day 08. F2E-選擇帳號
系列文
30天Vue出Google SSO30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言